const port = 7070;
const title = "vue项目最佳实践";

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // 1. 基础配置
  publicPath: "/best-practice",
  devServer: {
    port,
    proxy: {
      // 代理 /dev-api/user/login 到 http://127.0.0.1:3000/user/login
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:3000/`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
  },
  // 2. webpack 基础配置
  configureWebpack: {
    // 向index.html注入标题
    name: title,
    resolve: {
      // 路径别名
      alias: {
        comps: path.join(__dirname, "src/components"),
        icons: path.join(__dirname, "src/icons"),
      },
    },
  },
  // 3. webpack 链式配置
  chainWebpack(config) {
    // 配置svg规则排除icons⽬录中svg⽂件处理
    config.module.rule("svg").exclude.add(resolve("src/icons"));
    // 新增icons规则，设置svg-sprite-loader处理icons⽬录中的svg
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ symbolId: "icon-[name]" });
  },
};
